<script setup>
import {onMounted, ref} from "vue";
import {DeleteM, ListM} from "@/utils/api/admin.js";
import {ElMessage, ElMessageBox} from "element-plus";

const data = ref([{
  id: '',
  sno: '',
  eno: '',
  content: '',
  respond: '',
  jobId: '',
  contentTime: '',
  respondTime: '',
}]);
const seSno = ref();
const data_s = (data) => {
  const map = new Map();
  return data.reduce((rs, cu) => {
    const r = cu['sno'];
    if (!map.has(r)) {
      map.set(r, rs.length);
      rs.push({sno: r, data: [cu]});
    } else {
      rs[map.get(r)].data.push(cu);
    }
    return rs;
  }, [/*{sno:'',data:[]}*/]);
};
const data_s_j = (data) => {
  const map = new Map();
  return data.reduce((rs, cu) => {
    const r = cu['eno'] + '____' + cu['jobId'];
    if (!map.has(r)) {
      map.set(r, rs.length);
      rs.push({eno_jobId: r, data: [cu]});
    } else {
      rs[map.get(r)].data.push(cu);
    }
    return rs;
  }, [/*{eno_jobId:'',data:[]}*/]);
};

const list = () => {
  data.value = [];
  ListM(seSno.value).then(rs => {
    if (rs.code === 1) {
      data.value = rs.data;
    } else {
      ElMessage({
        message: '服务器错误',
        type: 'error',
      })
    }
  }).catch(error => console.error(error.toString()));
}

const deleteM = (items) => {
  ElMessageBox({
    message: '确定删除此留言',
    type: 'warning',
  }).then(() => {
    const ids = items.reduce((rs, cu) => {
      rs.push(cu['id']);
      return rs;
    }, []);
    DeleteM(ids).then(rs => {
      if (rs.code === 1) {
        ElMessage({
          message: '删除成功',
          type: 'success',
        });
        setTimeout(list,100)
      } else {
        ElMessage({
          message: '删除失败',
          type: 'warning',
        })
      }
    }).catch(error => console.error(error.toString()));
  }).catch(() => {
  });
}

onMounted(() => {
  list();
})

</script>

<template>
  <el-form label-width="80px" inline>
    <el-form-item label="学 号">
      <el-input v-model="seSno"/>
    </el-form-item>
    <el-form-item>
      <el-button @click="list" type="primary">搜 索</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="data_s(data)" border stripe max-height="560px" preserve-expanded-content>
    <el-table-column type="expand">
      <template #default="scope">
        <div class="table-item">
          <el-table :data="data_s_j(scope.row.data)" preserve-expanded-content>
            <el-table-column type="expand">
              <template #default="scope">
                <div class="msg-info">
                  <div v-for="(item, index) in scope.row.data" :key="index">
                    <div class="msg-content" v-if="item.content !== null && item.content !== ''">
                      【留言->】 {{ item.content }}<span class="time">__{{ item.contentTime }}</span>
                    </div>
                    <div class="msg-respond" v-if="item.respond !== null && item.respond !== ''">
                      {{ item.respond }} 【<-回复】<span class="time">__{{ item.respondTime }}</span>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="eno_jobId" label="企业编号-回复人____职位Id"/>
            <el-table-column label="操 作" width="100px">
              <template #default="scope">
                <el-button type="danger" link @click="deleteM(scope.row.data)">删 除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="sno" label="学号-留言人"/>
  </el-table>
</template>

<style scoped>
.table-item {
  padding-left: 20px;
}

.msg-info {
  padding: 1px 30px 1px 30px;
  max-height: 500px;
  overflow: auto;
}

.time {
  color: gray;
}

.msg-content {
  text-align: left;
  color: green;
}

.msg-respond {
  text-align: right;
  color: blue;
}
</style>